import React, { Component } from 'react';
import './TodoList.css'
import { Input, Button, List } from 'antd'
import store from './store/thunk'
import { CHANGE_INPUT, ADD_ITEM, DEL_ITEM } from './store/actionTypes'
import { changeInputAction, addItemAction, delItemAction } from './store/thunk/actionCreates'

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState()
        this.changeInputValue = this.changeInputValue.bind(this)
        this.addList = this.addList.bind(this)
        // this.delItem = this.delItem.bind(this)
        
        this.storeChange = this.storeChange.bind(this)
        store.subscribe(this.storeChange) // 订阅redux状态
    }
    render() { 
        return ( 
            <div style={{paddingTop:'10%'}}>
                <div className="example-input">
                    <Input size="large" value={this.state.inputValue} placeholder={this.state.inputValue} onChange={this.changeInputValue}/>
                    <Button size="large" type="primary" onClick={this.addList}>增加</Button>
                </div>
                <div className="list">
                    <List
                        bordered
                        dataSource={this.state.list}
                        renderItem={(item,index) => (
                            <List.Item onClick={this.delItem.bind(this,index)}>{item}</List.Item>
                        )}
                    />
                </div>
            </div>
         );
    }

    changeInputValue (e) {
        const action = changeInputAction(e.target.value)
        store.dispatch(action)
    }

    addList () {
        const action = addItemAction()
        // const action = { type: ADD_ITEM }
        store.dispatch(action)
    }

    delItem ( index ) {
        console.log(index)
        const action = delItemAction(index)
        // const action = {
        //     type:DEL_ITEM,
        //     index
        // }


        store.dispatch(action)
    }

    storeChange () {
        this.setState(store.getState())
    }
}
 
export default TodoList;